<!--
 * @Description: 双Y轴多类型图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-08-14 10:00:43
 * @LastEditTime: 2020-09-04 09:13:23
-->
<template>
    <ScreenContainer class="twoYAxisCharts demo">
        <!-- 标准双Y轴柱线混搭 -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis1"
                      title="标准双Y轴柱线混搭"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      :twoYAxisOptions="twoYAxisOptions"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      boundaryGap
                      smooth />
        </div>
        <!-- 横向滚动条(带视觉映射) -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis1"
                      title="横向滚动条(带视觉映射)"
                      top="100"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      barWidth="35%"
                      :dataZoom="dataZoom1"
                      :twoYAxisOptions="twoYAxisOptions"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      :visualMap="visualMap"
                      boundaryGap
                      smooth />
        </div>
        <!-- 纵向滚动条 -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis1"
                      title="纵向滚动条"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      :dataZoom="dataZoom2"
                      :twoYAxisOptions="twoYAxisOptions"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      boundaryGap
                      smooth />
        </div>
        <!-- 标注标线标域(自定义颜色) -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis2"
                      title="标注标线标域(自定义颜色)"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      :colors="['#f99e54','#ff5722']"
                      :markPoint="markPoint"
                      :markLine="markLine"
                      :markArea="markArea"
                      :twoYAxisOptions="twoYAxisOptions2"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      boundaryGap
                      smooth />
        </div>
        <!-- 测试柱图堆叠 -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis1"
                      title="测试柱图堆叠"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      :stack="stack"
                      :twoYAxisOptions="twoYAxisOptions"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      boundaryGap
                      smooth />
        </div>
        <!-- 测试双Y轴曲线图(面积图) -->
        <div class="box">
            <twoYAxis :apiMethod="getData"
                      apiParam="getTwoYAxis2"
                      title="测试双Y轴曲线图(面积图)"
                      xName1="月份"
                      yName1="数量"
                      yName2="比率"
                      valEnding2="%"
                      :twoYAxisOptions="twoYAxisOptions3"
                      :axisDegreeScope1="{min:0,max:300}"
                      :axisDegreeScope2="{min:-100,max:100}"
                      boundaryGap
                      areaStyle
                      label
                      smooth />
        </div>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import twoYAxis from '@/components/charts/default/twoYAxis.vue' //多轴图
export default {
    name: 'twoYAxisCharts',
    components: {
        ScreenContainer,
        twoYAxis,
    },
    data() {
        return {
            getData, //api方法
            twoYAxisOptions: {
                //双轴配置
                好评数: {
                    type: 'bar',
                },
                差评数: {
                    type: 'bar',
                },
                同比: {
                    type: 'line',
                    yAxisIndex: 1,
                },
                环比: {
                    type: 'line',
                    yAxisIndex: 1,
                },
            },
            twoYAxisOptions2: {
                //双轴配置
                评论数: {
                    type: 'bar',
                },
                同比: {
                    type: 'line',
                    yAxisIndex: 1,
                },
            },
            twoYAxisOptions3: {
                评论数: {
                    type: 'line',
                },
                同比: {
                    type: 'line',
                    yAxisIndex: 1,
                },
            },
            dataZoom1: {
                //横向滚动条
                xAxisIndex: [0], //滚动数据源
                minValueSpan: 1, //最小显示到的单元下标，1为2单元
                maxValueSpan: 3, //最大显示到的单元下标，3为4单元
            },
            dataZoom2: {
                //只支持单滚动条
                //纵向滚动条
                // yAxisIndex: [0, 1], //轴1/2都滚动
                yAxisIndex: [0], //只有轴1滚动
                start: 0, //滚动条默认显示当前轴数据范围，start为起始值，end为结束值，这里为百分比，最小0，最大100
                end: 80,
            },
            markPoint: {
                //标注
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' },
                ],
                label: {
                    color: '#fff',
                    textBorderColor: '#000',
                    formatter: function (params) {
                        return `${params.name}\n${params.value}`
                    },
                },
            },
            markLine: {
                //标线
                data: [{ type: 'average', name: '平均值' }],
                label: {
                    formatter: function (params) {
                        return `\r\r${params.name}\n\r\r${params.value}`
                    },
                },
            },
            markArea: {
                //标域
                label: {
                    position: 'top',
                },
                data: [
                    [
                        {
                            name: '标域',
                            xAxis: '3月',
                        },
                        {
                            xAxis: '5月',
                        },
                    ],
                ],
            },
            visualMap: {
                top: 65, //位置
                left: 'center',
                orient: 'horizontal', //水平放置映射图例，默认垂直
                seriesIndex: [0, 1], //只设置系列中的前两数据（柱图）
                pieces: [
                    {
                        lte: 50,
                    },
                    {
                        gt: 50,
                        lte: 100,
                    },
                    {
                        gt: 100,
                        lte: 150,
                    },
                    {
                        gt: 150,
                    },
                ],
            },
            stack: [
                {
                    type: '堆叠1',
                    names: ['好评数', '差评数'],
                },
                // {    //这里一般不用堆叠面积图，因为太乱了
                //     type: '堆叠2',
                //     names: ['同比', '环比'],
                // },
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 33.3333%;
        height: 50%;
    }
}
</style>
